Day 4｜模板語法：資料綁定與 @if 控制流

哈囉，各位邦友們！
昨天我們完成了第一個子元件並理解了元件的裝飾器結構。
今天來進一步把資料綁到畫面上，並用 @if/@else 做條件顯示。

今天要做什麼？

1. 在 App 建立 hero 狀態（signal）
2. 使用繫結動態文字與屬性/類別綁定顯示資料
3. 用 @if/@else 控制「有資料/無資料」畫面

前置需求

• 專案可 ng serve，Day03 的<app-hero-badge>可正常渲染

一、在 App 建立 hero 狀態

// src/app/app.ts
import { Component, signal } from '@angular/core';
import { HeroBadge } from './hero-badge/hero-badge';

type Hero = { id: number; name: string; rank?: string };

@Component({
  selector: 'app-root',
  imports: [HeroBadge],
  templateUrl: './app.html',
  styleUrl: './app.scss'
})
export class App {
  protected readonly title = signal('hero-journey');

  // 單一英雄狀態
  protected readonly hero = signal<Hero | null>({ id: 1, name: 'Narco', rank: 'A' });
}

二、範本使用繫結動態文字/屬性/類別綁定 + @if/@else

<!-- src/app/app.html -->
<h1>Hello, {{ title() }}</h1>

@if (hero(); as h) {
  <section
    [title]="'Hero #' + h.id"
    [class.is-a]="h.rank === 'A'"
    [attr.aria-label]="'hero-' + h.name">
    <h2>{{ h.name }}</h2>
    <p>Rank: {{ h.rank ?? 'N/A' }}</p>
  </section>
} @else {
  <p class="muted">No hero selected.</p>
}

<!-- 保留 Day03 範例 -->
<app-hero-badge></app-hero-badge>

重點：

• 繫結動態文字 {{ }}：適合直接顯示字串/數字。
• 屬性綁定 [prop]：綁定 DOM property（例：[title]）。
• 屬性(attribute) 綁定 [attr.xxx]：綁定真正的 HTML attribute（例：[attr.aria-label]）。
• 類別綁定 [class.xxx]：依狀態切換樣式。
• @if (expr; as x) { ... } @else { ... }：以別名 x 在區塊內使用計算結果。

三、新增樣式

/* src/app/app.scss */
/* ...existing code... */
.is-a { 
    color: #225;
    background: #eef;
    padding: 4px 8px;
    border-radius: 4px;
}

.muted {
    color: #888;
}

補充：

• 繫結動態文字只會讀取，不會改變 DOM 屬性值。
• [prop] 綁定 property；[attr.xxx] 才是 attribute 綁定。
• 用 @if 的 as 別名存取區塊內資料。

驗收清單：

• 畫面顯示 Hello 與英雄資訊（Name、Rank）。
• rank 為 'A' 時 section 具 is-a 類別。
  
• 將 hero 設為 null 後，@else 顯示「No hero selected.」。
  

常見錯誤與排查：

• 範本錯誤：檢查 @if/@else 區塊的大括號位置。
• 綁定無效：確認使用對應語法（[prop] vs [attr.xxx]）。
• 樣式未生效：確認類別名稱與選擇器一致。

今日小結：
你現在應該已經會使用繫結動態文字與屬性/類別綁定等方式顯示資料了，並且用 @if/@else 控制「有資料/無資料」畫面。
明天我們會把單一 hero 擴充成一個列表，來練習 @for 與 track。